<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="flag=!flag" value="toggle"/>
			<!-- v-if特点，每次都会删除或创建元素 -->
			<!-- v-show 每次不会重新进行创建或删除，只是切换了元素的display样式 -->
			<!-- v-if有较高的切换性能消耗 -->
			<!-- v-show有较高的初始渲染消耗 -->
			
			<!-- 涉及到频繁切换  使用v-show-->
			<!-- 如果这个元素可能永远不显示出来 使用v-if -->
			
			
			<h3 v-if="flag">这是用v-if控制的元素</h3>
			<h3 v-show="flag">这是用v-show控制的元素</h3>
		</div>
		<script type="text/javascript">
			var vm =new Vue({
				el:'#app',
				data:{
					flag:true
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>
